<%@page import="com.google.appengine.api.blobstore.BlobKey"%>
<%@page import="java.util.TreeMap"%>
<%@page import="entities.User"%>
<%@page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory"%>
<%@page import="com.google.appengine.api.images.ImagesServiceFactory"%>
<%@page import="com.google.appengine.api.images.ImagesService"%>
<%@page import="com.google.appengine.api.blobstore.BlobstoreService"%>
<%
BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
ImagesService imagesService = ImagesServiceFactory.getImagesService();
User user = (User) request.getAttribute("user");
TreeMap check = (TreeMap) request.getAttribute("check");
String success = (String) request.getAttribute("success");
%>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="/layouts/header.jsp" />

	<script type="text/javascript" src="/js/verify_domain.js"></script>
	
                <div id="leftSideContent">
                	<div class="profilePage clearafter">
                        <div class="left dashboard">
                            <jsp:include page="/elements/menu_profile.jsp" />
                        </div>
                        <div class="right profileContent">
                        	<% if (check.size() > 0) { %>
                        	<div class="message-error">
		                    	<span class="closeMessage"></span>
		                    	<p>
		                    		<% if (check.get("avatar") != null) { %>
									<%=check.get("avatar")%>
									<% } %>
		                    	</p>
		                    </div>
		                    <% } %>
		                    <% if (session.getAttribute("success") != null) { %>
		                    <div class="message-success">
		                    	<span class="closeMessage"></span>
		                    	<p><%=session.getAttribute("success") %></p>
		                    </div>
		                    <% 
		                    		session.removeAttribute("success");
		                    	} %>
                        
                        	<section class="block">
								<div class="blockContent changeAvatar">
									<h3 class="title">Change Avatar</h3>
									<form id="change_avatar" action="<%=blobstoreService.createUploadUrl("/profile/change-avatar") %>" method="post" enctype="multipart/form-data">
										<div class="avatar content-center">
											<% 
												if (user.getAvatar() != null && !user.getAvatar().isEmpty())  {
													 BlobKey blobKey = new BlobKey(user.getAvatar());
											%>
											<img alt="" src="<%=imagesService.getServingUrl(blobKey) %>=s120-c"><br />
											<% } else { %>							
											<img src="/images/no_avatar.gif" alt="Author Image"  />
											<% } %>
										</div>
										<div class="content-center">Size recommend 120x120</div>
										<div class="content-center"> 
											<input type="file" id="avatar_file" name="avatar" value="Upload" />
										</div>
										<div class="content-center">
									    	<button type="submit" class="buttonStyle">Change</button>
									    </div>
									</form>
								</div>
								<div class="blockShadow"></div>
							</section>
                        </div>
                    </div>
                </div>
                
                <!-- right content -->
                <jsp:include page="/elements/right.jsp" />
                <!-- end right content -->
                
<jsp:include page="/layouts/footer.jsp" />